import React, { useEffect, useState } from "react";
import { NavBar } from "react-vant";
// import { Card } from "react-vant";
// import { Arrow } from "@react-vant/icons";

import { RightOutline } from "antd-mobile-icons";
import { Card } from "antd-mobile";

function OrderNot() {
  let [orders, setOrders] = useState([
    {
      _id: "1",
      order_time: "2025-02-10 10:30:00", // 订单时间
      acceptance_time: "2024-02-10 10:00:00", // 接单时间
      order_id: "12345670rddwd", // 订单号
      order_status: "商家已接单", // 订单状态
      shop_name: "商家名称", // 商家名称
    },
    {
      _id: "2",
      order_time: "2025-02-10 10:35:00", // 订单时间
      acceptance_time: "2024-02-10 10:00:00", // 接单时间
      order_id: "123456789jidwid", // 订单号
      order_status: "订单配送中", // 订单状态
      shop_name: "商家名称", // 商家名称
    },
    // {
    //   _id: "3",
    //   order_time: "2024-02-10 10:40:00", // 订单时间
    //   acceptance_time: "2024-02-10 10:00:00", // 接单时间
    //   order_id: "123456789", // 订单号
    //   order_status: "订单交易成功", // 订单状态
    //   shop_name: "商家名称", // 商家名称
    // },
    // {
    //   _id: "4",
    //   order_time: "2024-02-10 11:30:00", // 订单时间
    //   acceptance_time: "2024-02-10 10:00:00", // 接单时间
    //   order_id: "123456789", // 订单号
    //   order_status: "订单已退款", // 订单状态
    //   shop_name: "商家名称", // 商家名称
    // },
  ]);

  // 生成订单编号
  // const generateOrderNumber = (userId) => {
  //   // 获取当前时间戳
  //   const timestamp = new Date().getTime();

  //   // 生成一个4位随机数
  //   const randomNum = Math.floor(Math.random() * 10000);

  //   // 获取用户ID的后4位（假设用户ID是一个字符串）
  //   const userIdSuffix = userId.slice(-4);

  //   // 组合成订单编号
  //   const orderNumber = `ORD-${timestamp}-${randomNum}-${userIdSuffix}`;

  //   return orderNumber;
  // };

  return (
    <div
      style={{ backgroundColor: "#F7F7F7", height: "100vh", width: "100vw" }}
    >
      <NavBar title="订单通知" onClickLeft={() => window.history.back(-1)} />

      {orders.map((item) => (
        <div key={item._id} style={{ width: "95%", padding: "0 10px" }}>
          <p
            style={{
              fontSize: "14px",
              color: "gray",
              margin: "10px 0",
              textAlign: "center",
            }}
          >
            {item.order_time}
          </p>
          <Card
            title={
              <div>
                <p>{item.order_status}</p>
                <span style={{ color: "gray", fontSize: "12px" }}>
                  您的订单交易成功接单，请耐心等待制作与配送。
                </span>
              </div>
            }
          >
            <span>订单号：{item.order_id}</span>
            <RightOutline style={{ float: "right", fontSize: "20px" }} />
          </Card>
        </div>
      ))}
    </div>
  );
}

export default OrderNot;
